<template>
    <div id="Ath">

        <template v-if="athDesc.FileType===1">
            <div style=" width: 100%;text-align:left">
                <p  style="">{{ath.Name}}</p>
                <el-upload
                        :action="action"
                        :data="fileParam"
                        :with-credentials="true"
                        list-type="picture-card"
                        multiple
                        :on-exceed="handleExceed"
                        :before-upload="beforeUpload"
                        :file-list="fileList"
                        :accept="accept"
                        :limit="athDesc.TopNumOfUpload"
                        :disabled="readonly==1"
                        :on-success="handleSuccess">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail"
                             :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                        </span>
                        <span v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleDownload(file.MyPK)">
                            <i class="el-icon-download"></i>
                        </span>
                        <template v-if="readonly==0 &&(athDesc.DeleteWay == 1 || athDesc.DeleteWay == 2 && file.Rec == webUser.No)">
                            <span
                                class="el-upload-list__item-delete"
                                @click="handleRemove(file.MyPK,null,fileList)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </template>
                    </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>


        </template>
        <template v-else-if="athDesc.FileType===0">
            <div style=" width: 95%;display: flex;justify-content: space-between">
                <p  style="">{{ath.Name}}</p>
                <template v-if="readonly==0">
                    <el-upload
                            multiple
                            class="upload-demo"
                            :action="action"
                            :data="fileParam"
                            :with-credentials="true"
                            :show-file-list="false"
                            :on-exceed="handleExceed"
                            :before-upload="beforeUpload"
                            :limit="athDesc.TopNumOfUpload"
                            :on-success="handleSuccess">
                        <p><el-button type="primary" icon="el-icon-paperclip" size="mini">点击上传</el-button></p>
                    </el-upload>
                </template>
            </div>
            <div>
                <el-table :data="fileList"  border style="width: 95%">
                    <el-table-column type="index" width="70" label="序号"></el-table-column>
                    <el-table-column prop="FileName" label="文件名" ></el-table-column>
                    <el-table-column prop="RDT" width="180" label="上传时间" ></el-table-column>
                    <el-table-column prop="RecName" width="120" label="上传人" ></el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleDownload(scope.row.MyPK)"> 下载</el-button>
                            <template v-if="readonly==0">
                                <template v-if="athDesc.DeleteWay == 1 || athDesc.DeleteWay == 2 && scope.row.Rec == webUser.No">
                                    <el-button type="text" style="color:red" @click="handleRemove(scope.row.MyPK,scope.row.$index,fileList)"> 删除</el-button>
                                </template>
                            </template>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </div>
</template>
<script>
    import{plant,basePath} from '@/api/config.js';
    export default {
        name: "Ath",
        props: {
            ath: {
                type: Object
            },
            refPKVal:{
                type:String
            },
            readonly:{
                type:Number
            }

        },
        data() {
            return {
                params: {},//参数
                webUser: {},
                athDesc:{},
                action:"",//附件上传的路径
                fileParam:{},//上传附件的参数
                fileList:[],//上传附件的集合
                accept:"*.*", //允许上传的格式
                //图片附件的参数
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false

            }
        },
        created(){
            this.params=this.$store.getters.getData;
            this.webUser= this.$store.getters.getWebUser;
            if (plant == 'CCFlow'){
                this.action = basePath + "/WF/Comm/Handler.ashx";
                this.fileParam={
                    AttachPK:this.ath.MyPK,
                    DoType:"HttpHandler",
                    DoMethod:"MoreAttach",
                    HttpHandlerName:"BP.WF.HttpHandler.WF_CCForm",
                    FK_Flow:this.params.FK_Flow,
                    PKVal:this.refPKVal
                }
            }
            else {
                this.action = basePath + "/WF/Ath/AttachmentUploadS.do";
                this.fileParam={
                    FK_FrmAttachment:this.ath.MyPK,
                    FK_Flow:this.params.FK_Flow,
                    PKVal:this.refPKVal
                }
            }

            this.loadData();
            this.accept = this.athDesc.Exts;
            if (this.accept == null ||this.accept == "" ||this.accept  == "*.*")
                this.accept = "";
            else
                this.accept = this.athDesc.Exts.replace(/\s*/g, "").replace(/[*.]/g, "").split(",");

            if(this.athDesc.FileType==1 && this.accept == "")
                this.accept = "image/gif,image/jpg,image/jepg,image/jpeg,image/bmp,image/png,image/tif,image/gsp";


        },
        methods:{
            loadData(){
                let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                handler.AddJson(this.params);

                handler.AddPara("RefOID", this.refPKVal);
                handler.AddPara("FK_FrmAttachment",this.ath.MyPK);
                handler.AddPara("FK_MapData", this.ath.FK_MapData);
                let data = handler.DoMethodReturnString("Ath_Init");
                if(data.indexOf("err@")!=-1){
                    this.$alert(data);
                    return;
                }
                data = JSON.parse(data);
                this.athDesc = data["AthDesc"][0]; // 附件属性
                this.fileList = data["DBAths"];  // 附件列表数据

                if(this.athDesc.FileType==1){
                    this.fileList.forEach(file=>{
                        let url = "";
                        if (plant == "CCFlow")
                            url = basePath + '/WF/CCForm/DownFile.aspx?DoType=Down&MyPK=' + file.MyPK + "&WorkID=" + this.params.WorkID + "&FK_Node=" + this.params.FK_Node;
                        else
                            url = basePath + '/WF/Ath/downLoad.do?MyPK=' + file.MyPK + "&WorkID=" + this.params.WorkID + "&FK_Node=" + this.params.FK_Node;
                        file.url=url;
                    })
                }

            },
            handleSuccess(){
                this.loadData();
            },
            handleRemove(mypk,index,rows) { //删除附件
                this.$confirm('您确定要删除吗?', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                    handler.AddPara("DelPKVal", mypk);
                    let str = handler.DoMethodReturnString("AttachmentUpload_Del");
                    if(str.indexOf('err@')!=-1){
                        this.$message({
                            type: 'error',
                            message: '删除失败'+str
                        });
                        console.log(str);
                    }else{
                        if(index==null)
                            index = this.fileList.findIndex(item => item.MyPK===mypk )
                        rows.splice(index, 1);
                    }
                });

            },
            handlePictureCardPreview(file) {//图片附件预览
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(mypk) { //附件下载
                let url = "";
                if (plant == "CCFlow")
                    url = basePath + '/WF/CCForm/DownFile.aspx?DoType=Down&MyPK=' + mypk + "&WorkID=" + this.params.WorkID + "&FK_Node=" + this.params.FK_Node;
                else
                    url = basePath + '/WF/Ath/downLoad.do?MyPK=' + mypk + "&WorkID=" + this.params.WorkID + "&FK_Node=" + this.params.FK_Node;
                document.location.href = url;

            },
            //图片上传个数限制
            handleExceed() {
                this.$message.warning(`请最多上传 ${this.athDesc.TopNumOfUpload} 张图片。`);

            },
            //图片上传的验证
            beforeUpload(file) {
                const isLt4M = file.size / 1024  <= this.athDesc.FileMaxSize; //图片大小不超过2MB

                if (!isLt4M) {
                    this.$message.error("上传文件大小不能超过 "+(this.athDesc.FileMaxSize/1024));
                    return;
                }
                return isLt4M;
            },
            LimitMinOfAth(){
                if(this.fileList<this.athDesc.NumOfUpload){
                    this.$alert(`${this.athDesc.Name}请最少上传 ${this.athDesc.NumOfUpload} 文件。`);
                    return false;
                }

            }
        }
    }
</script>
<style lang="less" scoped>
/deep/ input[type="file"]{
    display:none !important;
}
/deep/.el-table th {
    background-color: #eef1f6;
    text-align: left;
}
/deep/ .el-table td, /deep/.el-table th {
    height: 40px;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    padding:0;
}
/deep/.el-table /deep/.cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 24px;
    padding-left: 18px;
    padding-right: 18px;
}
/deep/.el-table td, /deep/.el-table th.is-leaf {
    border-bottom: 1px solid #dfe6ec;
}
/deep/.el-table--border td, /deep/.el-table--border th {
    border-right: 1px solid #dfe6ec;
}
/deep/.el-upload--picture-card /deep/.el-upload-list__item{
    width:108px;
    height:108px;
    line-height:106px;
}
</style>